<%@ page language="java"  pageEncoding="UTF-8" errorPage="../error.jsp"%>
<%-- <%@ taglib prefix="s" uri="/struts-tags" %> --%>
<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core'%>
<%
	pageContext.setAttribute("ctx", request.getContextPath());	
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<link rel="stylesheet"  type="text/css" href="${ctx}/css/default.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/js/jqueryeasyui12/themes/bootstrap/easyui.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/js/jqueryeasyui12/themes/icon.css" />
<script type="text/javascript" src="${ctx}/js/jqueryeasyui12/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jqueryeasyui12/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jqueryeasyui12/locale/easyui-lang-zh_TW.js"></script>
<script type="text/javascript" src="${ctx}/js/ipebg/IPEBG.js"></script>
<script type="text/javascript" src="${ctx}/js/ipebg/COMMON.js"></script>
<script type="text/javascript">
    var ctx = '${ctx}';
    jQuery(document).ready(function(){
    	$("table[id=tableShow]").show();
		$('#qryGrid').datagrid({
			title:'角色列表',
			nowrap: false,
			striped: true,
			fitColumns: true,
			url: ctx + '/role.do?action=roleList',
			remoteSort: false,
			//idField:'typeCode',
			singleSelect:true,
			rownumbers:true,
			frozenColumns:[[
			    {field:'ck',checkbox:true,width:30} 
			]],
			columns:[[
				{field:'roleId',title:'Id',width:50,hidden: true},	
				{field:'roleName',title:'角色名稱',width:100},
				{field:'roleCode',title:'角色代碼',width:100}
			]],
			pagination:true,
			pageSize:10,
			pageNumber:1,
			pageList:[10],
			onSelect:select
		});
		var p = $('#qryGrid').datagrid('getPager');
		if (p){
			$(p).pagination({
				onBeforeRefresh:function(){
					;
				}
			});
		}
		
		var dourl = ctx+'/function.do?action=treelist';
       	$('#functionTree').tree({    
    		url: dourl,
    		lines:true,
    		checkbox:true,
    		loadFilter: function(data){   
    			return data.data;      
    		}     
    	});
	});
    
    function select(){
		var selected = $('#qryGrid').datagrid('getSelected');
		if(selected){
			$("#functionOptionWin").hide();
			$('#functionTree').html("");
			var params = {"roleId" :  selected.roleId};
		    var dourl = ctx+'/function.do?action=treelistbyrole';
	       	$('#functionTree').tree({    
	    		url: dourl,
	    		lines:true,
	    		checkbox:true,
	    		queryParams:params,
	    		loadFilter: function(data){
					parseTreeNode(data.data);
	    			return data.data;
	    		},
	    		onClick: function(node){
	    			getOption(node);
	    		}
	    	});
		}
	}

	//設置父節點的checked狀態
	function parseTreeNode(nodes){
		$.each(nodes,function(i,o){
			if(o.children && o.children.length>0) {
				var childrenStr = IPEBG.json2str(o.children);
				if(childrenStr.indexOf("true") != -1 && childrenStr.indexOf("false") === -1){
					o.checked = true;
				}else{
					o.checked = false
				}
				parseTreeNode(o.children);
			}

		});
	}

    function getOption(node){
    	var selected = $('#qryGrid').datagrid('getSelected');
    	if(node.checked){
			$("#functionOptionWin").show();
			$("table[id=tableOptionShow]").show();
			var params = {
				"roleId" :  selected.roleId,
				"functionId" : node.id
			};
			$('#qryGridOption').datagrid({
				title:'菜單頁面按鈕列表',
				nowrap: false,
				striped: true,
				fitColumns: true,
				url: ctx + '/roleauth.do?action=authOptionList',
				remoteSort: false,
				queryParams:params,
				singleSelect:false,
				rownumbers:true,
				frozenColumns:[[
				    {field:'ck',checkbox:true,width:30} 
				]],
				columns:[[
					{field:'functionId',title:'Id',width:50,hidden: true},
					{field:'optionDsc',title:'按鈕名稱',width:100},
					{field:'optionId',title:'按鈕編碼',width:100}
				]],
				onLoadSuccess:function(data){                   
					if(data){
						$.each(data.rows, function(index, item){
							if(item.checked){
								$('#qryGridOption').datagrid('checkRow', index);
							}
						});
					}
				} 
			});
		}else{
			$("#functionOptionWin").hide();
		}
    }
		
	//查詢方法
	function query(){
		var roleName= $("#roleName").val();
		var roleCode= $("#roleCode").val();
		var param = {
				"roleCode" : roleCode,
				"roleName" : roleName
			};	
		$('#qryGrid').datagrid('load',param);	
	}
	//保存角色權限方法
	function save(){
		var nodes = $('#functionTree').tree('getChecked',['checked','indeterminate']);
		debugger;
		var functionId = "";
		for(var i=0;i<nodes.length;i++){
			functionId += nodes[i].id+",";
		}

		functionId = functionId.substring(0,functionId.length-1);
		if(functionId==''){
			functionId='EMPTY';
		}

		var selected = $('#qryGrid').datagrid('getSelected');
		if(selected){
			var params = {
				"roleId" :  selected.roleId,
				"functionId" : functionId
			};
			
			$.ajax({
				type:'post',
				url :ctx + '/roleauth.do?action=saveauth',
				data :params,
				datatype :'text',
				cache : false,
				error : function(textStatus, errorThrown) {
					$.messager.alert('系統提示','系統錯誤(' + textStatus + '): '+errorThrown,'error');
				},
				success : function(data, textStatus){
					if(data == "success")
                		$.messager.alert('系統提示','保存成功！','info');
                	else
                		$.messager.alert('系統提示','保存失敗！','info');
				}
			});
		}
	}
	
	//保存角色權限按鈕方法
	function saveOptionAuth(){
		var selected = $('#qryGrid').datagrid('getSelected');
		var nodes = $('#functionTree').tree('getSelected');
		var selectedOption = $('#qryGridOption').datagrid('getChecked');
		
		var optionId = "";
		for(var i=0;i<selectedOption.length;i++){
			optionId += selectedOption[i].optionId+",";
		}
		optionId = optionId.substring(0,optionId.length-1);
			var params = {
				"roleId" :  selected.roleId,
				"functionId" : nodes.id,
				"optionIds" : optionId
			};
				
			$.ajax({
				type:'post',
				url :ctx + '/roleauth.do?action=saveauthOption',
				data :params,
				datatype :'text',
				cache : false,
				error : function(textStatus, errorThrown) {
					$.messager.alert('系統提示','系統錯誤(' + textStatus + '): '+errorThrown,'error');
				},
				success : function(data, textStatus){
					if(data == "success")
						$.messager.alert('系統提示','保存成功！','info');
					else
						$.messager.alert('系統提示','保存失敗！','info');
				}
			});
	}
</script>
</head> 
<body>    
    <div style="width:60%;float:left;height:100%" region="center" split="true">
    	<table id="qryGrid" toolbar="#tb"></table>
		<div id="tb">
			<form action="" id="tbFormId" style="margin-top:10px;margin-bottom:10px;">
			<table width="100%" id="tableShow" style="display:none;">
				<tr>
					<td width="40%" style="white-space:nowrap;padding:0px" align="left">
						<span style="font-size:13px;">角色名稱:</span>
						<input type="text" id = "roleName" />
										
						<span style="font-size:13px;">角色代碼:</span>
						<input type="text" id = "roleCode" />
						<a class="easyui-linkbutton" iconCls="icon-search" plain="true" href="#" code="query" onclick="query()">查詢</a>
					</td>
				</tr>
			</table>
			</form>
		</div>
		<br/>
		<div id="functionOptionWin" style="width:100%">
			<table id="qryGridOption" toolbar="#tbOption"></table>
			<div id="tbOption">
				<form action="" id="tbFormId" style="margin-top:10px;margin-bottom:10px;">
					<table width="100%" id="tableOptionShow" style="display:none;">
						<tr>
							<td width="60%" style="white-space:nowrap;">
								<a href="#" id="btnadd" class="easyui-linkbutton" iconCls="icon-save" plain="true" code="Save" onclick="saveOptionAuth()">保存用戶角色按鈕權限</a>
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
	</div>
	<div style="float:left;width:10px;height:100%"></div>
	<div region="east" title="角色權限設置" split="true" style="width:310px;float:left;" align="left" >
		<div style="padding:10px;border: 1px solid #95B8E7;">  
			<ul id="functionTree"></ul>
		</div>
		<div style="margin-right:5px;padding:5px;text-align:center;">
			<a href="#" class="easyui-linkbutton" style="margin-right:5px;" icon="icon-ok" code="ButtonSave" onclick="save()">確定</a>
		</div>
	</div>
  </body>
</html>